<template>
	<el-dialog
	  title="预览"
    :append-to-body="true"
	  :visible.sync="visible"
	  :before-close="close"
	  :close-on-click-modal="false"
	  fullscreen>
    <el-button type="success" class="pan-btn success-btn" v-print="'#report'" size="mini">打印</el-button>
    {{ '共' + page + '页' }}
    <div id="report">
      <div v-for="(report, rIndex) in tableList" :id="reportId(rIndex)" :key="rIndex">
        <div style="height: 20px;"></div>
        <div class="report-container">
          <div class="report-head">
            <img src="../../../assets/img/logoNew.png" style="height: 55px;" />
            <b>{{ reportInfo.companyName }}</b>
            <span style="margin-left: 330px" v-if="reportInfo.reportNum != null">文件编号：{{ reportInfo.reportNum }}</span>
          </div>
          <div class="name-box">
            <div class="report-name">
              <b>{{ reportInfo.reportName }}</b>
            </div>
          </div>
          <div class="table-box">
            <div>
              <table border="1" v-if="yfb && !qt">
                <tr>
                	<td class="info-lable">检品名称</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.productName"></div></td>
                  <td class="info-lable">报告编号</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.checkNum"></div></td>
                </tr>
                <tr>
                  <td class="info-lable">物料编码</td>
                  <td class="info-value-container"><div class="info-value" v-html="checkList.productGmp"></div></td>
                	<td class="info-lable">入厂批号</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.batchNum"></div></td>
                </tr>
                <tr>
                	<td class="info-lable">请验部门</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.registCheckDepartmentName"></div></td>
                	<td class="info-lable">原厂批号</td>
                	<td class="info-value-container"><div class="info-value" v-html="yfbList.originalBatch"></div></td>
                </tr>
                <tr>
                	<td class="info-lable">包装规格</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.productPackSpec"></div></td>
                	<td class="info-lable">数&nbsp;&nbsp;量</td>
                	<td class="info-value-container"><div class="info-value" v-html="Math.round(yfbList.grossQuantity) + yfbList.grossUnitName"></div></td>
                </tr>
                <tr>
                	<td class="info-lable">供货单位</td>
                	<td class="info-value-container"><div class="info-value" v-html="yfbList.supplierName"></div></td>
                	<td class="info-lable">生产单位</td>
                	<td class="info-value-container"><div class="info-value" v-html="yfbList.manufacturerName"></div></td>
                </tr>
                <tr>
                	<td v-if="yfbList.reinspectDate != null" class="info-lable">复 验 期</td>
                	<td v-if="yfbList.reinspectDate != null" class="info-value-container"><div class="info-value">{{ yfbList.reinspectDate | showTime }}</div></td>
                  <td v-if="yfbList.reinspectDate == null" class="info-lable">有效期至</td>
                  <td v-if="yfbList.reinspectDate == null" class="info-value-container"><div class="info-value">{{ yfbList.validityDate | showTime }}</div></td>
                	<td class="info-lable">请检日期</td>
                	<td class="info-value-container"><div class="info-value">{{ checkList.registCheckDate | showTime }}</div></td>
                </tr>
                <tr>
                	<td class="info-lable">检验日期</td>
                	<td class="info-value-container"><div class="info-value">{{ checkList.inspectDate | showTime }}</div></td>
                	<td class="info-lable">报告日期</td>
                	<td class="info-value-container"><div class="info-value">{{ checkList.reportDate | showTime }}</div></td>
                </tr>
                <tr>
                	<td class="info-lable">检验依据</td>
                	<td class="info-value-container" colspan="3"><div class="info-value" v-html="standard.accordingToInside"></div></td>
                </tr>
              </table>
              <table border="1" v-if="qt">
                <tr>
                	<td class="info-lable">检品名称</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.productName"></div></td>
                  <td class="info-lable">报告编号</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.checkNum"></div></td>
                </tr>
                <tr>
                	<td class="info-lable">请验部门</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.registCheckDepartmentName"></div></td>
                	<td class="info-lable">批&nbsp;&nbsp;号</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.batchNum"></div></td>
                </tr>
                <tr>
                	<td class="info-lable">规&nbsp;&nbsp;格</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.productPackSpec"></div></td>
                	<td class="info-lable">来&nbsp;&nbsp;源</td>
                	<td class="info-value-container"><div class="info-value" v-html="yfbList.manufacturerName"></div></td>
                </tr>
                <tr>
                	<td class="info-lable">数&nbsp;&nbsp;量</td>
                	<td class="info-value-container"><div class="info-value" v-html="Math.round(yfbList.grossQuantity) + yfbList.grossUnitName"></div></td>
                	<td class="info-lable">请检日期</td>
                	<td class="info-value-container"><div class="info-value">{{ checkList.registCheckDate | showTime }}</div></td>
                </tr>
                <tr>
                	<td class="info-lable">检验日期</td>
                	<td class="info-value-container"><div class="info-value">{{ checkList.inspectDate | showTime }}</div></td>
                	<td class="info-lable">报告日期</td>
                	<td class="info-value-container"><div class="info-value">{{ checkList.reportDate | showTime }}</div></td>
                </tr>
                <tr>
                	<td class="info-lable">检验依据</td>
                	<td class="info-value-container" colspan="3"><div class="info-value" v-html="standard.accordingToInside"></div></td>
                </tr>
              </table>
              <table border="1" v-if="zc">
                <tr>
                	<td class="info-lable">检品名称</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.productName.replace(/\([n=2)]*\)/,'').replace(/\([n=1.8)]*\)/,'')"></div></td>
                  <td class="info-lable">报告编号</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.checkNum"></div></td>
                </tr>
                <tr v-if="zp">
                	<td class="info-lable">生产车间</td>
                	<td class="info-value-container"><div class="info-value" v-html="zcList.workshopName"></div></td>
                	<td class="info-lable">生产工序</td>
                	<td class="info-value-container"><div class="info-value" v-html="zcList.procedureName"></div></td>
                </tr>
                <tr v-if="cp">
                	<td class="info-lable">请验部门</td>
                	<td class="info-value-container"><div class="info-value" v-html="zcList.workshopName"></div></td>
                	<td class="info-lable">产品编码</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.productGmp"></div></td>
                </tr>
                <tr>
                	<td class="info-lable">批&nbsp;&nbsp;号</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.batchNum"></div></td>
                	<td class="info-lable">规&nbsp;&nbsp;格</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.productSpec"></div></td>
                </tr>
                <tr v-if="zp">
                	<td class="info-lable">取样数量</td>
                	<td class="info-value-container"><div class="info-value" v-html="Math.round(checkList.getQuantity) + checkList.getUnitName"></div></td>
                	<td class="info-lable">数&nbsp;&nbsp;量</td>
                	<td class="info-value-container"><div class="info-value" v-html="Math.round(zcList.batchQuantity) + zcList.batchUnitName"></div></td>
                </tr>
                <tr v-if="zp">
                	<td class="info-lable">请验日期</td>
                	<td class="info-value-container"><div class="info-value">{{ checkList.registCheckDate | showTime }}</div></td>
                	<td class="info-lable">检验日期</td>
                	<td class="info-value-container"><div class="info-value">{{ checkList.inspectDate | showTime }}</div></td>
                </tr>
                <tr v-if="cp">
                	<td class="info-lable">包装规格</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.productPackSpec"></div></td>
                	<td class="info-lable">产成品量</td>
                	<td class="info-value-container"><div class="info-value" v-html="Math.round(zcList.productionQuantity) + zcList.productionUnitName"></div></td>
                </tr>
                <tr v-if="cp">
                	<td class="info-lable">生产日期</td>
                	<td class="info-value-container"><div class="info-value">{{ zcList.productionDate | showTime }}</div></td>
                	<td class="info-lable">有效期至</td>
                	<td class="info-value-container"><div class="info-value">{{ zcList.validityDate | showTime }}</div></td>
                </tr>
                <tr v-if="cp">
                	<td class="info-lable">检验日期</td>
                	<td class="info-value-container"><div class="info-value">{{ checkList.inspectDate | showTime }}</div></td>
                	<td class="info-lable">报告日期</td>
                	<td class="info-value-container"><div class="info-value">{{ checkList.reportDate | showTime }}</div></td>
                </tr>
                <tr v-if="zp">
                	<td class="info-lable">报告日期</td>
                	<td class="info-value-container" colspan="3"><div class="info-value">{{ checkList.reportDate | showTime }}</div></td>
                </tr>
                <tr>
                	<td class="info-lable">检验依据</td>
                	<td class="info-value-container" colspan="3"><div class="info-value" v-html="cp ? standard.accordingToNation : standard.accordingToInside"></div></td>
                </tr>
              </table>
              <table border="1" v-if="ys">
                <tr>
                	<td class="info-lable">检品名称</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.productName"></div></td>
                	<td class="info-lable">报告编号</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.checkNum"></div></td>
                </tr>
                <tr>
                	<td class="info-lable">物料编码</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.productGmp"></div></td>
                	<td class="info-lable">取样位置</td>
                	<td class="info-value-container"><div class="info-value" v-html="ysList.workshopName"></div></td>
                </tr>
                <tr>
                	<td class="info-lable">取 样 点</td>
                	<td class="info-value-container" colspan="3"><div class="info-value" v-html="ysList.getNames"></div></td>
                </tr>
                <tr>
                	<td class="info-lable">批&nbsp;&nbsp;号</td>
                	<td class="info-value-container"><div class="info-value" v-html="checkList.batchNum"></div></td>
                	<td class="info-lable">请验日期</td>
                	<td class="info-value-container"><div class="info-value">{{ checkList.registCheckDate | showTime }}</div></td>
                </tr>
                <tr>
                	<td class="info-lable">检验日期</td>
                	<td class="info-value-container"><div class="info-value">{{ checkList.inspectDate | showTime }}</div></td>
                  <td class="info-lable">报告日期</td>
                  <td class="info-value-container"><div class="info-value">{{ checkList.reportDate | showTime }}</div></td>
                </tr>
                <tr>
                	<td class="info-lable">检验依据</td>
                	<td class="info-value-container" colspan="3"><div class="info-value" v-html="standard.accordingToInside"></div></td>
                </tr>
              </table>
            </div>
            <div v-if="report.showPageUp" class="text-center page-up">(接上一页)</div>
            <div class="report-table-container">
              <table :id="tableId(rIndex)">
                <tr>
                  <td class="jyxm"><b>检验项目</b></td>
                  <td class="jyxm_b"></td>
                  <td class="bzgd"><b>标准规定</b></td>
                  <td class="bzgd_b"></td>
                  <td class="jyjg"><b>检验结果</b></td>
                </tr>
                <tr v-for="(item, iIndex) in report.items" :key="iIndex">
                  <td style="display: none;">{{ item.checkItemId }}</td>
                  <td style="vertical-align: top;" v-html="item.printItemName"></td>
                  <td></td>
                  <td style="text-align: left; vertical-align: top;" v-html="item.printValue == null ? null : item.printValue == 0 ? (cp ? item.nationInspectionItemValue : item.insideInspectionItemValue) : '应符合规定。'"></td>
                  <td></td>
                  <td style="vertical-align: top;" v-html="item.printConfig == null ? null : item.printConfig == 0 ? item.itemConclusionMerge : '符合规定'"></td>
                </tr>
              </table>
              <div v-if="report.showBlank" class="report-table-blank" :style="{height: blankHeight }">
                <div class="blank-tag">以下为空白</div>
              </div>
            </div>
            <div v-if="!report.showPageDown" class="table-conclusion">
              <div class="t-c-value">
                结论：<span v-html="cp ? standard.nationVerdict : standard.insideVerdict"></span>
                <template v-if="standard.specialValue != null && standard.specialValue != ''">
                  <br>&nbsp;&nbsp;&nbsp;<span v-html="standard.specialValue"></span>
                </template>
              </div>
            </div>
          </div>
          <div v-if="report.showPageDown" class="text-center">
            (转下一页)
          </div>
          <div v-else class="report-foot">
            <div v-if="checkList.checkTypeName == '中间品'">
              <div class="foot-name">报告人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;复核人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
              <div class="foot-date">日&nbsp;期：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;期：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
            </div>
            <div v-else>
              <div class="foot-name">报告人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              复核人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              批准人：</div>
              <div class="foot-date">日&nbsp;期：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              日&nbsp;期：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              日&nbsp;期：</div>
            </div>
          </div>
          <div>
            <div style="margin-left: 750px;font-size: 15px;">页码 Page: {{ rIndex+1 }}/{{ page }}</div>
          </div>
          <div class="full-blank" :style="{height: report.fullToMaxHeight}"></div>
        </div>
      </div>
    </div>
	</el-dialog>
</template>

<script>
  import { isBlank,parseTime } from '@/common/js/utils'
  import Calc from 'calculatorjs'
	export default {
    filters: {
      showTime(time) {
        let date
        if (typeof time === 'object') {
          date = time
        } else {
          if (('' + time).length === 10) time = parseInt(time) * 1000
          date = new Date(time)
        }
        let y = date.getFullYear()
        let m = date.getMonth() + 1
        m = m < 10 ? '0' + m : m
        let d = date.getDate()
        d = d < 10 ? '0' + d : d
        return y+'年'+m+'月'+d+'日'
      }
    },
		data() {
			return {
        visible: false,
        TopBottomBlankHetght: 20,
        //最小时显示空白
        minHeight: 1340,
        //最大时分页
        maxHeight: 1400,
        blankHeight: null,
        updateCssCount: 0,
        page: 1,
        checkList: {},
        yfbList: {},
        zcList: {},
        ysList: {},
        standard: {},
        reportInfo: {
          companyName: '成都倍特',
          reportNum: null,
          reportName: null
        },
        tableList: [
          {
            showBlank: false,
            showPageDown: false,
            showPageUp: false,
            fullToMaxHeight: '0px',
            items: [],
            specialItems: []
          }
        ]
			}
		},
    props: ["childDataForm"],
    computed: {
      yfb() {
        if (this.childDataForm.checkList.checkTypeName == '原料'
        || this.childDataForm.checkList.checkTypeName == '辅料'
        || this.childDataForm.checkList.checkTypeName == '包材'
        || this.childDataForm.checkList.checkTypeName == '其他') {
          return true
        }
        return false
      },
      qt() {
        return this.childDataForm.checkList.checkTypeName == '其他'
      },
      zc() {
        if (this.childDataForm.checkList.checkTypeName == '中间品'
        || this.childDataForm.checkList.checkTypeName == '成品') {
          return true
        }
        return false
      },
      cp() {
        return this.childDataForm.checkList.checkTypeName == '成品'
      },
      zp() {
        return this.childDataForm.checkList.checkTypeName == '中间品'
      },
      ys() {
        return this.childDataForm.checkList.checkTypeName == '制药用水/纯蒸汽'
      }
    },
    created() {
      if (!isBlank(this.childDataForm)) {
        this.checkList = this.childDataForm.checkList
        this.yfbList = this.childDataForm.yfbList
        this.zcList = this.childDataForm.zcList
        this.ysList = this.childDataForm.ysList
        this.standard = this.childDataForm.standard
        this.tableList[0].items = this.childDataForm.items
        this.tableList[0].specialItems = this.childDataForm.specialItems
        let checkTypeId = this.checkList.checkTypeId
        this.reportInfo.reportNum = this.reportMap(checkTypeId, 'num')
        this.reportInfo.reportName = this.reportMap(checkTypeId, 'name')
        this.visible = true
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.paint(0)
      })
    },
    methods: {
      paint(index) {
        let reportId = this.reportId(index)
        let currentHeight = this.getHeightById(reportId)
        if (currentHeight < this.minHeight) {
          //底部留20px边距
          this.blankHeight = this.maxHeight - currentHeight - this.TopBottomBlankHetght
          this.blankHeight = this.blankHeight + 'px'
          this.tableList[index].showBlank = true
        }else if(currentHeight > this.maxHeight) {
          //控制成品不得超过1页
          if (this.checkList.checkTypeName == '成品') {
            //第一次修改td > height: 40px->30px
            if (this.updateCssCount == 0) {
              $(".jyxm").css({"height" : '30px'})
            }
            //第二次以后修改report-container > line-height: px - 1
            if (this.updateCssCount > 0) {
              let nowPxNum = $(".report-container").css("line-height").replace('px','') * 1
              let nextPxNum = Calc.sub(nowPxNum,1)
              $(".report-container").css({"line-height" : nextPxNum+'px'})
            }
            this.updateCssCount++
            this.$nextTick(() => {
              this.paint(0)
            })
            return
          }
          let table = document.getElementById(this.tableId(index))
          while(this.getHeightById(reportId) > this.maxHeight){
            table.removeChild(table.lastChild)
          }
          this.tableList[index].showPageDown = true
          this.$nextTick(() => {
            this.fullToMax(index)
            let lastId = parseInt(table.lastChild.firstChild.innerHTML)
            let data = this.tableList[index]
            let sIndex = null
            for (let i=0,j=data.items.length; i<j; i++) {
              if (lastId == data.items[i].checkItemId) {
                sIndex = i + 1
                break
              }
            }
            let standardNewArr = data.items.splice(sIndex)
            let newData = {
              showBlank: false,
              showPageDown: false,
              showPageUp: true,
              fullToMaxHeight: '0px',
              items: standardNewArr
            }
            this.tableList.push(newData)
            this.page = this.page + 1
            this.$nextTick(() => {
              this.paint(index + 1)
            })
          })
        }
      },
      fullToMax(index) {
        let reportId = this.reportId(index)
        if (this.getHeightById(reportId) < this.maxHeight){
          this.tableList[index].fullToMaxHeight = this.maxHeight - this.getHeightById(reportId)
          this.tableList[index].fullToMaxHeight = this.tableList[index].fullToMaxHeight + 'px'
        }
      },
      reportId(index) {
        return 'one-report_' + index
      },
      tableId(index) {
        return 'report-table_' + index
      },
      blankId(index) {
        return 'blank_' + index
      },
      getHeightById(id) {
        return parseInt(window.getComputedStyle(document.getElementById(id)).getPropertyValue('height'))
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      reportMap(checkTypeId, prop) {
        const map = {
          1: {
            num: "ZK / SMP·032-R02-02",
            name: "原料检验报告"
          },
          2: {
            num: "ZK / SMP·032-R03-02",
            name: "辅料检验报告"
          },
          3: {
            num: "ZK / SMP·032-R04-02",
            name: "包材检验报告"
          },
          4: {
            num: "ZK / SMP·032-R05-05",
            name: "中间产品检验结果通知单"
          },
          5: {
            num: null,
            name: "成品检验报告"
          },
          6: {
            num: "ZK / SMP·032-R09-02",
            name: "检验报告"
          },
          7: {
            num: "ZK / SMP·032-R07-02",
            name: "制药用水检验报告"
          },
          9: {
            num: "ZK / SMP·032-R09-02",
            name: "检验报告"
          }
        }
        return map[checkTypeId][prop]
      }
    }
	}
</script>

<style type="text/scss" lang="scss" scoped>
  .report-container{
    color: black;
    font-family: SimSun;
    font-size: 18px;
    width: 940px;
    padding: 15px;
    line-height: 1.42857143;
    .report-head{
      height: 55px;
      padding: 0 15px;
      .report-head-box{
        height: 45px;
        .report-head-logo{
          width: 37px;
          height: 100%;
          float: left;
        }
        .report-head-logo img{
          vertical-align: inherit;
          height: 100%;
          width: 100%;
        }
        .report-head-text{
          margin-left: 20px;
          float: left;
          margin-top: 15px;
        }
      }
      .report-head-line{
        border-top: solid 3px #bfbfbf;
        border-bottom: solid 3px black;
        height: 10px;
      }
    }
    .name-box{
      height: 100px;
      .report-name{
        text-align: center;
        font-size: 30px;
        line-height: 100px;
      }
      .page-info{
        margin-left: 87%;
        font-size: 15px;
        margin-top: -25px;
      }
    }
    .table-box{
      width: 100%;
      border: solid 1px;
      border-bottom:solid 2px;
      .page-up{
        border: solid 1px;
        border-top: none;
      }
      .report-table-container{
        border-left: solid 1px;
        border-right: solid 1px;
        .report-table-blank{
          padding: 5px 407px;
          .blank-tag{
            border: solid black 1px;
          }
        }
      }
      .info-lable{
      	width: 150px;
        height: 34px;
        text-align: center;
      }
      .info-value-container{
      	width: 305px;
        .info-value{
        	margin-left: 5px;
        }
      }
      .table-conclusion{
        border: solid 1px;
        border-bottom: none;
        line-height: 30px;
        .t-c-value{
          margin-left: 5px;
        }
      }
    }
    .report-foot{
      margin-top: 20px;
      margin-bottom: 10px;
      width: 100%;
      height: 70px;
      .foot-name{
        height: 35px;
        padding: 0 70px;
      }
      .foot-date{
        margin-top: 10px;
        height: 35px;
        padding: 0 70px;
      }
    }
    .full-blank{
      width: 100%;
    }
  }
  .jyxm{
    padding-left: 4px;
    width: 170px;
    height: 40px;
  }
  .jyxm_b{
    width: 30px;
  }
  .bzgd{
    width: 525px;
    text-align: center;
  }
  .bzgd_b{
    width: 30px;
  }
  .jyjg{
    margin-left: 2px;
    width: 155px;
  }
</style>
